/**
 * Propriedades de um Elemento
 *
 * @this {UIProperties}
 * @version
 */

function UIProperties() {

    /**
     * Variaveis
     */
    var _oLayoutPropertiesTabView = null,
    _oImagePropertiesTabView = null,
    _oLabelPropertiesTabView = null;
    var _oClassOwner = this;

    /**
     * Inicializa o objeto da classe
     */
    this.init = function() {

        _oLayoutPropertiesTabView = new YAHOO.widget.TabView("layoutpropertiestabview");
        _oImagePropertiesTabView = new YAHOO.widget.TabView("imagepropertiestabview");
        _oLabelPropertiesTabView = new YAHOO.widget.TabView("labelpropertiestabview");

        this.hideAllProperties();

        //Propriedades do Layout
        this.initLayoutProperties();

        //Propriedades da Imagem
        this.initImageProperties();
        
        //Propriedades do Rotulo
        this.initLabelProperties();
    }

    /**
     * Funcoes
     */
    this.initLayoutProperties = function() {

        document.getElementById("layoutwidth").addEventListener("change",this.onChangeLayoutProperties,false);
        document.getElementById("layoutheight").addEventListener("change",this.onChangeLayoutProperties,false);
        document.getElementById("layoutorientation").addEventListener("change",this.onChangeLayoutProperties,false);
    }

    this.initImageProperties = function() {

        document.getElementById("imageurl").addEventListener("change",this.onChangeImageProperties,false);
        document.getElementById("imagewidth").addEventListener("change",this.onChangeImageProperties,false);
        document.getElementById("imageheight").addEventListener("change",this.onChangeImageProperties,false);
    }

    this.initLabelProperties = function() {
        
        document.getElementById("labelfont").addEventListener("click",this.onChangeLabelProperties,false);
        document.getElementById("labeltext").addEventListener("change",this.onChangeLabelProperties,false);
    }

    this.onChangeLayoutProperties = function(evt){

        var oLayoutComposer = ModelInstance.getLayoutComposer();
        var oLayout = ModelInstance.getLayoutComposer().getLayout();
        var htmlSelect, htmlOption, htmlInput;
        var validator = new Validator();

        //checa a propriedade alterada
        switch(evt.currentTarget.id){

            case "layoutwidth":
                htmlInput = document.getElementById(evt.currentTarget.id);
                oLayout.width = validator.floatNumber(htmlInput.value, oLayout.width);
                htmlInput.value = oLayout.width;
                break;
            case "layoutheight":
                htmlInput = document.getElementById(evt.currentTarget.id);
                oLayout.height = validator.floatNumber(htmlInput.value, oLayout.height);
                htmlInput.value = oLayout.height;
                break;
            case "layoutorientation":
                htmlSelect = document.getElementById(evt.currentTarget.id);
                htmlOption = htmlSelect.options[htmlSelect.selectedIndex].value;
                oLayout.setLayoutOrientation(htmlOption);
                document.getElementById("layoutwidth").value = oLayout.width;
                document.getElementById("layoutheight").value = oLayout.height;
                break;
        }
        oLayoutComposer.editPropertiesLayout(oLayout);
    }


    this.onChangeImageProperties = function(evt){

        var oLayoutComposer = ModelInstance.getLayoutComposer();
        var oImage = oLayoutComposer.getSelectedElement();
        var htmlInput;
        var validator = new Validator();

        if(oImage != null){
            //checa a propriedade alterada
            switch(evt.currentTarget.id){

                case "imageurl":
                    htmlInput = document.getElementById(evt.currentTarget.id);
                    oImage.href = htmlInput.value;
                    htmlInput.value = oImage.href;
                    break;
                case "imagewidth":
                    htmlInput = document.getElementById(evt.currentTarget.id);
                    oImage.width = validator.floatNumber(htmlInput.value, oImage.width);
                    htmlInput.value = oImage.width;
                    break;
                case "imageheight":
                    htmlInput = document.getElementById(evt.currentTarget.id);
                    oImage.height = validator.floatNumber(htmlInput.value, oImage.height);
                    htmlInput.value = oImage.height;
                    break;
            }
            oLayoutComposer.editPropertiesElement(oImage);
        }
    }


    this.onChangeLabelProperties = function(evt){

        var oUIMenu = UIInstance.getUIMenuInstance();
        var oLayoutComposer = ModelInstance.getLayoutComposer();
        var oLabel = oLayoutComposer.getSelectedElement();
        var htmlInput;

        if(oLabel != null){
            //checa a propriedade alterada
            switch(evt.currentTarget.id){

                case "labelfont":
                    oUIMenu.onClickFont();
                    break;
                case "labeltext":
                    htmlInput = document.getElementById(evt.currentTarget.id);
                    oLabel.text = htmlInput.value;
                    htmlInput.value = oLabel.text;
                    oLayoutComposer.editPropertiesElement(oLabel);
                    break;
            }
        }
    }

    this.loadLayoutProperties = function(oLayout){

        document.getElementById("layoutwidth").value = oLayout.width;
        document.getElementById("layoutheight").value = oLayout.height;

        var layoutOrientation = document.getElementById("layoutorientation");
        for(var i=0; i < layoutOrientation.options.length; i++){
            if(layoutOrientation.options[i].value == oLayout.orientation){
                layoutOrientation.options[i].selected = true;
            }
        }
    }

    this.loadImageProperties = function(oElement){

        //url imagem
        document.getElementById("imageurl").value = oElement.href;
        //largura
        document.getElementById("imagewidth").value = oElement.width;
        //altura
        document.getElementById("imageheight").value = oElement.height;
    }

    this.loadLabelProperties = function(oElement){

        //texto
        document.getElementById("labeltext").value = oElement.text;
    }

    this.showProperties = function(){

        var oLayoutComposer = ModelInstance.getLayoutComposer();
        var oElement = oLayoutComposer.getSelectedElement();

        this.hideAllProperties();
        if(oElement != null) {
            switch(oElement.type){
                case EElementType.eTImage:
                    document.getElementById("imagepropertiestabview").setAttribute("style", "display:inline");
                    _oClassOwner.loadImageProperties(oElement);
                    break;
                case EElementType.eTLabel:
                    document.getElementById("labelpropertiestabview").setAttribute("style", "display:inline");
                    _oClassOwner.loadLabelProperties(oElement);
                    break;
            }
        }
        else {
            document.getElementById("layoutpropertiestabview").setAttribute("style", "display:inline");
            var oLayout = oLayoutComposer.getLayout();
            _oClassOwner.loadLayoutProperties(oLayout);
        }

    }

    this.hideAllProperties = function(){
        
        document.getElementById("layoutpropertiestabview").setAttribute("style", "display:none");
        document.getElementById("imagepropertiestabview").setAttribute("style", "display:none");
        document.getElementById("labelpropertiestabview").setAttribute("style", "display:none");
    }

    /**
     * Chamada do inicializador da classe
     */
    this.init();
}


